<html xmlns:saxon="http://icl.com/saxon">
   <head>
      <link rel="stylesheet" type="text/css" href="doc.css"/>
      <link rel="stylesheet" type="text/css" href=""/>
      <meta author="The MathWorks Ltd."/>
      <meta copyright="2011 The MathWorks Ltd."/>
      <title>Layout basics</title>
   </head>

   
    <body>
      <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td bgcolor="#e4f0f8"><A href="User guide.html"><font face="Arial" bgcolor="#e4f0f8" size="+0" underline="0" color="#000000"><b>User guide</b></font></A></td>
            <td width="36" bgcolor="#e4f0f8"><A HREF="User guide1.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide1_2.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
         </tr>
      </table>
   

      <br clear="all"/>
          
      <h2>1.1: Layout basics&nbsp;<a href="User guide1.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
      
                <p>To see how layouts work, let's use the most basic layout,
                    a horizontal list (or box). We first create a window:</p>
                    <example>
                        <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">f = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>();</font></pre>
                        <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example1.png"/></center></font></p>
                    </example>

                <p>Now let's create the horizontal layout and add it to the figure. Note
            that in common with other MATLAB graphics objects, one object is added to
        another by setting the "Parent" property - this will automatically adjust the list
    of "Children" in the parent object. The job of a horizontal box layout is to arrange
    its contents in a horizontal line, setting the position of each element to best fill
    the space:</p>
                <example>
                        <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">layout = <a href="uiextras.HBox.html"><code class="FUNCTION">uiextras.HBox</code></a>( 'Parent', f );</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example1.png"/></center></font></p>
</example>
                <p>Nothing's changed! That's because the layout is for arranging
            other user-interface components - it doesn't draw anything itself. Let's
        add some buttons. Note how after creating each button the existing contents
    of the box make room for the new addition; we don't need to set the position of
    any user-interface component!</p>
                <example>
                        <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011"><a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 1', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 2', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 3', 'Parent', layout );</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example2.png"/>.<img src="Images/basics_example3.png"/>.<img src="Images/basics_example4.png"/></center></font></p>
</example>
                <p>Other layouts work in exactly the same way, although visually
            the end-result is quite different:</p>
                <example>
                        <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">f = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>();
layout = <a href="uiextras.VBox.html"><code class="FUNCTION">uiextras.VBox</code></a>( 'Parent', f );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 1', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 2', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 3', 'Parent', layout );</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example_vbox.png"/></center></font></p>
                </example>
                <example>
                <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">f = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>();
layout = <a href="uiextras.TabPanel.html"><code class="FUNCTION">uiextras.TabPanel</code></a>( 'Parent', f );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 1', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 2', 'Parent', layout );
<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 3', 'Parent', layout );</font></pre>
                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example_tab.png"/></center></font></p>
                </example>
                
            
      
      <br clear="ALL"/>
      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Understanding layouts</font></a></td>
            <td width="20%" height="15" bgcolor="#e4f0f8" align="center"><a href="index.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">[Top]</font></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide1_2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Types of layout</font></a></td>
            <td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide1_2.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
         </tr>
      </table>
      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
   
   </body>
</html>
        
